<html>
	<head>
		<meta http-equiv=Content-Type  content="text/html;" charset="UTF-8">
		<meta name='viewport' content='width=device-width, initial-scale=0.8, maximum-scale=2.0, minimum-scale=0.8, user-scalable=no'>
	</head>
<body>
	<div class="box">
		<button>开始</button>
		<button>暂停</button>
		</div>
		<div id="box">午餐吃什么</div>
		<div id="insert"></div>
		<script type="text/javascript">
		var arr=["拉面","米线","凉皮","米饭","黄焖鸡","麻辣烫","麻辣香锅","热干面","浆水面","豆腐菜","炸鸡","烧烤","竹筒饭","拌面","鱼粉"];
		var insertDiv = document.getElementById("insert");
		var insertHtml = "";
		for (var value in arr) {
			insertHtml=insertHtml+'<p><input type="checkbox" name="category" value="'+arr[value]+'" checked="1" onclick=>'+arr[value]+'</p>';
		}
		insertDiv.innerHTML = insertHtml;
		var btn = document.getElementsByTagName("button");
		var box = document.getElementById("box");
		var timer = null;
		btn[0].onclick = function(){
			clearInterval(timer);
			var checkBoxs = document.getElementsByName("category");
			var foodlist = []
			for (var checkbox in checkBoxs) {
				if (checkBoxs[checkbox].checked) {
					foodlist.push(checkBoxs[checkbox].value)
				}
			}
			console.log(foodlist)
			timer = setInterval(function(){

				var a = Math.random()*(foodlist.length);
				var index = parseInt(a);
				box.innerHTML = foodlist[index];
			},30)
		}
		btn[1].onclick = function() {
			clearInterval(timer);
		}
		</script>
</body>
</html>